<template>
	<div class="findpassword">
		<h1 class="title">找回密码</h1>
		<el-form ref="codeform" :model="form" label-width="100px">
			<el-form-item label="登录名">
				<el-input v-model="form.userName"></el-input>
				<el-button plain @click="givecode()">获取验证码</el-button>
			</el-form-item>
			<el-form-item label="验证码">
				<el-input v-model="form.verifyCode"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" plain size="small" @click="verify()">确定</el-button>
				<el-button style="float:right" plain size="small" @click="goform">回到登录页</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
  name: 'LoginCode',
  data() {
		const module = '/ums-user-verifycode'
		return {
			url: {
				givecode: module + '/givecode',
				verify: module + '/verify'
				
			},
			form: {
				userName: '',
				verifyCode: '',
			}
		}
  },
  methods: {
		goform() {
			this.$emit('update:r',0)
		},
		
		givecode() {
			this.$refs['codeform'].validate((flag) => {
				if(flag){
					alert('获取验证码')
					this.post(this.url.givecode,this.form,() => {
				this.$emit('update:show',false)
				this.$emit('getTableData')
			})
				}
			})
			
		},
		
		verify() {
			this.$refs['codeform'].validate((flag) => {
				if(flag){
					alert('进行验证')
					this.post(this.url.verify,this.form,() => {
				this.$emit('update:show',false)
				this.$emit('getTableData')
			})
				}
			})
			
		},
  }
}
</script>
<style scoped lang="less">
	@titleheight: 100px;
	.findpassword{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		transform: rotateY(180deg) translateZ(1px);
		.title{
			text-align: center;
			height:@titleheight;
			line-height: @titleheight;
		}
		.el-form{
			width: 90%;
			.el-input{
				width: auto;
				margin-right: 10px;
			}
		}
	}
</style>
